<template>
    <div class="lunar-converter">
        <div class="tool-header">
            <h1>农历公历转换器</h1>
            <p>支持公历与农历之间互转，展示干支、生肖、节气等信息</p>
        </div>

        <el-row :gutter="20">
            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>公历转农历</span>
                            <el-button type="primary" size="small" @click="convertSolar">转换</el-button>
                        </div>
                    </template>

                    <el-form label-width="100px" label-position="left">
                        <el-form-item label="公历日期">
                            <el-date-picker v-model="solarForm.date" type="date" placeholder="选择公历日期"
                                format="YYYY-MM-DD" value-format="YYYY-MM-DD" />
                        </el-form-item>
                    </el-form>

                    <el-descriptions v-if="solarResult.calculated" :column="1" border class="result-box">
                        <el-descriptions-item label="农历日期">{{ solarResult.lunarDate }}</el-descriptions-item>
                        <el-descriptions-item label="干支纪年">{{ solarResult.ganzhiYear }}</el-descriptions-item>
                        <el-descriptions-item label="生肖">{{ solarResult.zodiac }}</el-descriptions-item>
                        <el-descriptions-item label="节气">{{ solarResult.jieqi || '无' }}</el-descriptions-item>
                        <el-descriptions-item label="值日星期">{{ solarResult.week }}</el-descriptions-item>
                    </el-descriptions>

                    <el-empty v-else description="选择公历日期后点击转换" />
                </el-card>
            </el-col>

            <el-col :span="12">
                <el-card>
                    <template #header>
                        <div class="card-header">
                            <span>农历转公历</span>
                            <el-button type="primary" size="small" @click="convertLunar">转换</el-button>
                        </div>
                    </template>

                    <el-form label-width="100px" label-position="left">
                        <el-form-item label="农历年份">
                            <el-select v-model="lunarForm.year" placeholder="选择年份">
                                <el-option v-for="year in yearOptions" :key="year" :label="`${year}年`" :value="year" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="农历月份">
                            <el-select v-model="lunarForm.month" placeholder="选择月份">
                                <el-option v-for="m in monthOptions" :key="m.value" :label="m.label" :value="m.value" />
                            </el-select>
                        </el-form-item>
                        <el-form-item label="闰月">
                            <el-switch v-model="lunarForm.isLeap" />
                            <small class="tip">如为闰月则开启，默认关闭</small>
                        </el-form-item>
                        <el-form-item label="农历日期">
                            <el-select v-model="lunarForm.day" placeholder="选择日期">
                                <el-option v-for="d in dayOptions" :key="d.value" :label="d.label" :value="d.value" />
                            </el-select>
                        </el-form-item>
                    </el-form>

                    <el-descriptions v-if="lunarResult.calculated" :column="1" border class="result-box">
                        <el-descriptions-item label="公历日期">{{ lunarResult.solarDate }}</el-descriptions-item>
                        <el-descriptions-item label="星期">{{ lunarResult.week }}</el-descriptions-item>
                        <el-descriptions-item label="节气">{{ lunarResult.jieqi || '无' }}</el-descriptions-item>
                    </el-descriptions>

                    <el-empty v-else description="选择农历日期后点击转换" />
                </el-card>
            </el-col>
        </el-row>

        <el-card class="info-card">
            <template #header>
                <div class="card-header">
                    <span>使用说明</span>
                </div>
            </template>
            <ul class="info-list">
                <li>年份范围：1900-2100。</li>
                <li>农历转换时若出现“无对应日期”提示，请确认是否选中了正确的闰月与日子。</li>
            </ul>
        </el-card>
    </div>
</template>

<script setup>
import { reactive } from 'vue'
import { ElMessage } from 'element-plus'
import { Solar, Lunar } from 'lunar-javascript'
import dayjs from 'dayjs'

const solarForm = reactive({
    date: ''
})

const lunarForm = reactive({
    year: '',
    month: '',
    day: '',
    isLeap: false
})

const solarResult = reactive({
    calculated: false,
    lunarDate: '',
    ganzhiYear: '',
    zodiac: '',
    jieqi: '',
    week: ''
})

const lunarResult = reactive({
    calculated: false,
    solarDate: '',
    week: '',
    jieqi: ''
})

const yearOptions = Array.from({ length: 201 }, (_, i) => 1900 + i)
const monthOptions = Array.from({ length: 12 }, (_, i) => ({
    value: i + 1,
    label: `${i + 1}月`
}))
const chineseDigits = ['一', '二', '三', '四', '五', '六', '七', '八', '九']
const formatLunarDay = (day) => {
    if (day <= 10) return `初${chineseDigits[day - 1]}`
    if (day < 20) return `十${chineseDigits[day - 11]}`
    if (day === 20) return '二十'
    if (day < 30) return `廿${chineseDigits[day - 21]}`
    return '三十'
}
const dayOptions = Array.from({ length: 30 }, (_, i) => ({
    value: i + 1,
    label: formatLunarDay(i + 1)
}))

const convertSolar = () => {
    if (!solarForm.date) {
        ElMessage.warning('请选择公历日期')
        return
    }

    const parsed = dayjs(solarForm.date)
    const solar = Solar.fromYmd(parsed.year(), parsed.month() + 1, parsed.date())
    const lunar = solar.getLunar()

    const zodiac = typeof lunar.getYearShengXiao === 'function' ? lunar.getYearShengXiao() : ''
    Object.assign(solarResult, {
        calculated: true,
        lunarDate: lunar.toFullString(),
        ganzhiYear: `${lunar.getYearInGanZhi()}年`,
        zodiac,
        jieqi: lunar.getJieQi() || '',
        week: `星期${solar.getWeekInChinese()}`
    })
}

const convertLunar = () => {
    if (!lunarForm.year || !lunarForm.month || !lunarForm.day) {
        ElMessage.warning('请选择完整的农历日期')
        return
    }

    try {
        const lunar = Lunar.fromYmd(lunarForm.year, lunarForm.month, lunarForm.day, lunarForm.isLeap)
        const solar = lunar.getSolar()
        Object.assign(lunarResult, {
            calculated: true,
            solarDate: solar.toYmd(),
            week: `星期${solar.getWeekInChinese()}`,
            jieqi: lunar.getJieQi() || ''
        })
    } catch (error) {
        ElMessage.error('该农历日期不存在，请检查闰月与日子')
        lunarResult.calculated = false
    }
}

</script>

<style scoped>
.lunar-converter {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
}

.tool-header {
    text-align: center;
    margin-bottom: 30px;
}

.tool-header h1 {
    font-size: 2.2rem;
    margin-bottom: 10px;
}

.card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 600;
}

.result-box {
    margin-top: 20px;
}

.info-card {
    margin-top: 30px;
}

.info-list {
    margin: 0;
    padding-left: 20px;
    color: #666;
    line-height: 1.8;
}

.tip {
    margin-left: 10px;
    color: #999;
}

@media (max-width: 768px) {
    .card-header {
        flex-direction: column;
        gap: 10px;
        align-items: flex-start;
    }
}
</style>
